<template>
	<view>
		<view class="od-banner">
			<image class="od-banner-icon" src="@/static/images/od_bg_icon.png" mode="widthFix" />
			<view :class="'od-jd  od-jd-'+orderStatus">
				<!-- 进度条 -->
				<view class="od-jd-out">
					<view class="od-jd-in"></view>
				</view>
				<!-- 文本进度 -->
				<view class="vp-flex od-jd-text">
					<view class="vp-flex_1">
						<text class="od-jd-st-0">填写订单</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-10">在线支付</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-20">专人服务</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-30">服务完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="top">
			<!-- 代付款 -->
			<!-- <block v-if="orderStatus===10">
			<view class="wait" v-if="orderList.trade_state==='已取消'">
				<p style="font-size: 36rpx;font-weight: 600;color: #000;">订单待支付</p>
				<p>请在<counter style="color:#ffa200;font-size:24rpx" :second="orderList.order_start_time"
						@counterOver="onCounterOver"></counter>内完成支付，超时订单自动取消
				</p>
				<!-- orderList.price -->
			<!-- <button class="btn" @click="dopay">立即支付({{orderList.price}}元)</button>
		</view>
		</block> -->
			<!-- 进行中 -->
			<!-- <block v-if="orderStatus===20"> -->
			<view class="wait" style="height: 200rpx;">
				<p style="font-size: 38rpx;color:#000;font-weight: 600;">服务进行中</p>
				<p>已安排服务专员，将于预约时间进行服务</p>
			</view>
			<!-- </block> -->
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRaw,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const app = getApp()
	onLoad((params) => {
		orderDetail(params)
	})
	const orderList = ref({})
	console.log(orderList.value.trade_state, 'orderList=========================')
	const orderStatus = computed(() => {
		const map = {
			'待支付': '10',
			'待服务': '20',
			'已完成': '30',
			'已取消': '40'
		}
		return map[orderList.value.trade_state]
	})
	// 获取订单详情
	const orderDetail = (params) => {
		app.globalData.utils.request({
			url: '/order/detail?oid=' + params.oid,
			methods: 'get',
			header: {
				token: uni.getStorageSync('token')
			},
			success(res) {
				orderList.value = res.data
			}
		})
	}
	// 支付

	const dopay = () => {}
</script>

<style lang="scss">
	@import '../service/index.css';

	page {
		background-color: #f4f4f4;

		.top {
			height: 300rpx;

			.wait {
				height: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: start;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background-color: #fff;
				padding: 35rpx;
				position: relative;
				top: -25rpx;

				.btn {
					width: 70%;
					background-color: #55aa00;
					text-align: center;
					color: #fff;
					font-weight: 600;
					font-size: 36rpx;
				}
			}
		}
	}
</style>